<template>
  <div class="brand_set" v-loading="loading" element-loading-text="加载中...">
    <div class="header">
      <div class="btn_group">
        <router-link to="/commodity/addbrand">
          <HPlainButton>添加品牌</HPlainButton>
        </router-link>
        <el-dropdown trigger="click">
          <HButton :disabled="selecttion.length == 0">
            批量操作
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </HButton>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="useAll">
                <el-icon>
                  <CircleCheck />
                </el-icon>
                批量启用
              </el-dropdown-item>
              <el-dropdown-item @click="disableAll">
                <el-icon>
                  <Warning />
                </el-icon>
                批量禁用
              </el-dropdown-item>
              <el-dropdown-item @click="deleAll">
                <el-icon>
                  <Delete />
                </el-icon>
                批量删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="search">
        <el-input
          v-model.trim="code"
          placeholder="编号搜索"
          class="input-with"
          clearable
          style="width: 160px"
          @keyup.enter="searchList"
          @clear="getList"
        />
        <el-input
          v-model.trim="name"
          placeholder="名称搜索"
          class="input-with"
          clearable
          style="width: 160px"
          @keyup.enter="searchList"
          @clear="getList"
        />
        <HButton type="primary" @click="searchList">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
      </div>
    </div>
    <div class="table">
      <el-table
        border
        stripe
        resizable
        :data="tableData"
        ref="tableList"
        @selection-change="handleChange"
        height="100%"
        @row-dblclick="viewDetail"
      >
        <el-table-column type="selection" width="50" fixed="left" :align="'center'" />

        <!-- 序号 -->
        <el-table-column
          show-overflow-tooltip
          type="index"
          label="序号"
          width="50"
          fixed="left"
          :align="'center'"
        />
        <!-- 品牌编号 -->
        <el-table-column show-overflow-tooltip prop="code" label="品牌编号" width="250" />

        <!-- 品牌名称 -->
        <el-table-column show-overflow-tooltip prop="name" label="品牌名称" width="200">
          <template #default="scope">
            <HLink @click="viewDetail(scope.row)">{{ scope.row.name }}</HLink>
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="128" />

        <!-- 更新时间 -->
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="128" />

        <!-- 状态 -->
        <el-table-column prop="status" label="状态" width="70" fixed="right" :align="'center'">
          <template #default="scope">
            <div class="flex_justify_center">
              <HStatus v-if="!scope.row.status">启用</HStatus>
              <HStatus v-if="scope.row.status" type="info">禁用</HStatus>
            </div>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" width="90">
          <template #default="scope">
            <el-space :size="0" :spacer="spacer">
              <HLink @click="editDetail(scope.row)">修改</HLink>
              <HLink @click="viewDetail(scope.row)">详细</HLink>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="pagination"
        :list_total="total"
        @size-change="getList"
        @current-change="getList(false)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { getBrandList, changeBrand, deleBrand } from '@/api/brand'
  import { ref, onMounted, h } from 'vue'
  import { ElDivider, ElMessage, ElMessageBox } from 'element-plus'
  import { Search, Delete, Warning, ArrowDown, CircleCheck } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })
  const router = useRouter()
  const loading = ref(false)
  const pagination = ref()
  const tableList = ref()
  const name = ref('') // 品牌名称
  const code = ref('') // 品牌编号
  const status = ref(true) // 品牌状态
  const tableData = ref([]) // 品牌列表
  const limit = ref() // 每页显示数量
  const page = ref() // 当面页码
  const total = ref()

  // 获取品牌列表
  const getList = async (val = true) => {
    loading.value = true
    if (val) pagination.value.setPage()
    limit.value = pagination.value.size
    page.value = pagination.value.current
    const data = {
      name: name.value,
      code: code.value,
      limit: limit.value,
      page: page.value,
    }
    await getBrandList(data).then((res) => {
      total.value = parseInt(res.data.data.total)
      loading.value = false
      tableData.value = res.data.data.rows
    })
  }

  onMounted(() => {
    getList()
  })

  // 获取表格选中的数据 1-分类 2-故障库
  const selecttion = ref([])
  const handleChange = (val) => {
    if (val.length != 0) {
      val.forEach((item) => {
        if (selecttion.value.indexOf(item.id) == -1) {
          selecttion.value.push(item.id)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.id)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  // 批量启用
  const useAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: '请选择要启用的品牌',
        type: 'warning',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      return
    }
    ElMessageBox({
      title: '提示',
      message: '确认启用选中的品牌?',
      type: 'warning',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(() => {
      changeBrand(selecttion.value, { status: !status.value }).then((res) => {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 5000,
          plain: true,
          showClose: true,
        })
        tableList.value.clearSelection()
        getList()
      })
    })
  }

  // 批量禁用
  const disableAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: '请选择要禁用的品牌',
        type: 'warning',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      return
    }
    ElMessageBox({
      type: 'warning',
      title: '提示',
      message: '确定禁用选中的品牌?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(() => {
      changeBrand(selecttion.value, { status: status.value }).then((res) => {
        ElMessage({
          message: res.data.message,
          type: res.data.success ? 'success' : 'error',
          duration: 5000,
          plain: true,
          showClose: true,
        })
        if (res) {
          if (res.data.code == 20000) {
            selecttion.value = []
            tableList.value.clearSelection()
            getList()
          }
        }
      })
    })
  }

  // 批量删除
  const deleAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: '请选择要删除的品牌',
        type: 'warning',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      return
    }
    ElMessageBox({
      type: 'error',
      title: '提示',
      message: '确定删除选中的品牌?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(() => {
      loading.value = true
      deleBrand(selecttion.value).then((res) => {
        ElMessage({
          message: res.data.message,
          type: res.data.success ? 'success' : 'error',
          duration: 5000,
          plain: true,
          showClose: true,
        })
        if (res) {
          if (res.data.code == 20000) {
            selecttion.value = []
            tableList.value.clearSelection()
            getList()
          }
        }
      })
    })
  }

  // 修改品牌
  const editDetail = (obj) => {
    router.push({ path: '/commodity/editbrand/' + obj.id })
  }

  // 查看详细
  const viewDetail = (obj) => {
    router.push({ path: '/commodity/branddetail/' + obj.id })
  }

  // 搜索品牌
  const searchList = () => {
    getList()
  }
  defineExpose({ getList })
</script>

<style scoped lang="scss">
  .brand_set {
    display: flex;
    flex-direction: column;
    height: 100%;
    row-gap: 5px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .btn_group {
        display: flex;
        gap: 5px;
      }

      .search {
        display: flex;
        gap: 5px;
      }
    }

    .table {
      max-height: calc(100% - 66px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }

  .form_content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
</style>
